import React = require("react");
import * as ui from "maishu-ui-toolkit";
import { FormValidator } from "maishu-dilu";

type ConfirmCallback<T> = (item: T) => void;
export interface ItemDialogState<T> {
    item: T, title?: string
}
export class ItemDialog<P, T, S extends ItemDialogState<T> = ItemDialogState<T>> extends React.Component<P, S> {
    private item: T;
    protected element: HTMLElement;
    private confirmCallback: ConfirmCallback<T>;

    protected confirmButtonText = "保存"
    protected cancelButtonText = "取消";
    protected validator: FormValidator;

    constructor(props) {
        super(props);

        this.state = { item: {} as T } as any;
        let render = this.render;
        console.assert(render != null);

        this.render = () => {
            let { title, item } = this.state || {} as this["state"];
            if (item == null)
                item = {} as this["state"]["item"];

            return <div className="modal fade" ref={e => this.element = e || this.element}>
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span className="sr-only">Close</span>
                            </button>
                            <h4 className="modal-title">{title || ""}</h4>
                        </div>
                        <div className="modal-body">
                            {render.bind(this)()}
                        </div>
                        <div className="modal-footer" style={{ marginTop: 0 }}>
                            <button type="button" className="btn btn-default" data-dismiss="modal">
                                {this.cancelButtonText}
                            </button>
                            <button type="button" className="btn btn-primary"
                                onClick={() => this.confirm()}>
                                {this.confirmButtonText}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        }
    }

    private confirm() {
        if (this.validator && !this.validator.check())
            return;

        let { item } = this.state;
        Object.assign(this.item, item);
        ui.hideDialog(this.element);
        if (this.confirmCallback)
            this.confirmCallback(item)
    }

    show(item: T, title: string, confirm?: ConfirmCallback<T>)
    show(title: string, confirm?: ConfirmCallback<T>)
    show(arg1: any, arg2: any, arg3?: any) {

        let item: T, title: string, confirm: ConfirmCallback<T>;
        if (typeof arg1 == "string") {
            title = arg1;
            confirm = arg2;
        }
        else {
            item = arg1;
            title = arg2;
            confirm = arg3;
        }

        if (this.validator)
            this.validator.clearErrors();

        this.item = item;
        this.confirmCallback = confirm;
        this.setState({ item: Object.assign({}, item) as any, title }, () => {
            ui.showDialog(this.element);
        });
    }

    //     return { show };

    // render() {
    //     let { item, title } = this.state || {} as this["state"];
    //     if (item == null)
    //         return <></>;

    //     return <div className="modal-dialog">
    //         <div className="modal-content">
    //             <div className="modal-header">
    //                 <button type="button" className="close" data-dismiss="modal">
    //                     <span aria-hidden="true">&times;</span>
    //                     <span className="sr-only">Close</span>
    //                 </button>
    //                 <h4 className="modal-title">{title || ""}</h4>
    //             </div>
    //             <div className="modal-body">
    //                 {args.createElement.bind(this)(item, ItemDialog.options)}
    //             </div>
    //             <div className="modal-footer" style={{ marginTop: 0 }}>
    //                 <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
    //                 <button type="button" className="btn btn-primary"
    //                     onClick={() => this.confirm()}>确定</button>
    //             </div>
    //         </div>
    //     </div>
    // }
}

// export function createItemDialog<T, O>(args: {
//     createElement: (item: T, self: React.Component<{}, { item: T, title?: string }>, options?: O) => JSX.Element,
//     confirm?: (item: T) => void,
// }) {

//     class ItemDialog extends React.Component<{}, { item: T, title?: string }> {
//         static options: O;
//         static item: T;

//         confirm() {
//             if (!args.confirm)
//                 return;

//             let { item } = this.state;
//             Object.assign(ItemDialog.item, item);
//             args.confirm(ItemDialog.item);
//         }

//         render() {
//             let { item, title } = this.state || {} as this["state"];
//             if (item == null)
//                 return <></>;

//             return <div className="modal-dialog">
//                 <div className="modal-content">
//                     <div className="modal-header">
//                         <button type="button" className="close" data-dismiss="modal">
//                             <span aria-hidden="true">&times;</span>
//                             <span className="sr-only">Close</span>
//                         </button>
//                         <h4 className="modal-title">{title || ""}</h4>
//                     </div>
//                     <div className="modal-body">
//                         {args.createElement.bind(this)(item, ItemDialog.options)}
//                     </div>
//                     <div className="modal-footer" style={{ marginTop: 0 }}>
//                         <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
//                         <button type="button" className="btn btn-primary"
//                             onClick={() => this.confirm()}>确定</button>
//                     </div>
//                 </div>
//             </div>
//         }
//     }

//     let dialogElement = this.dialogElement = document.createElement("div");
//     dialogElement.className = "modal fade";
//     document.body.appendChild(dialogElement);
//     let instance: ItemDialog;
//     ReactDOM.render(<ItemDialog ref={e => instance = e || instance} />, dialogElement);

//     function show(item: T, title: string, options?: O) {
//         ItemDialog.options = options;
//         ItemDialog.item = item;
//         instance.setState({ item: Object.assign({}, item), title });
//         ui.showDialog(dialogElement);
//     }

//     return { show };
// }